<template>
  <el-card
    v-for="item in moviesData"
    :key="item['id']"
    @click="goViedo(item['id'])"
  >
    <div class="flex mb-4 text-sm border-2">
      <img :src="item['poster']" class="w-1/2 mt-2 mr-3 h-1/3" alt="" />
      <div class="p-1">
        <h3 class="mb-10">{{ item["title"] }}</h3>
        <p class="mb-10">
          观众评分：<span>{{ item["rate"] }}</span>
        </p>
        <p class="mb-10">
          主演:<span>{{ item["author"] }}</span>
        </p>
        <p class="mb-10">
          时长:<span>{{ item["duration"] }}</span>
        </p>
      </div>
    </div>
    <!-- <h1> {{sendSelectMoviceStore.selectItemID}}</h1> -->
  </el-card>
 
</template>

<script lang="ts">
import { defineComponent, onMounted, ref,  } from "vue";
import API from "../../../utils/axios";
import { useRouter } from "vue-router";
import { getSelectMoviceId } from "../../../store/getSelectMoviceId";

const sendSelectMoviceStore = getSelectMoviceId();

export default defineComponent({
  name: "personal",
  setup() {
    // 获取电影资源卡片数据的定义
    const moviesData = ref([]);
    // 点击卡片跳转到详情页
    const router: any = useRouter();
    function goViedo(id: number): any {
      router.push({
        path: "/viedopage",
        query: {
          id: id,
        },
      });
    }
    // 获取电影的资源数据
   
      const getMoviesData = async () => {
      let res = await API({
        url: "/api/movie/hot",
        method: "get",
      });
       if(sendSelectMoviceStore.selectItemID ===0){
        moviesData.value = res.data.data.comming.movies
        // console.log("测试数据", moviesData.value);
       }
     }
     getMoviesData();

    return {
      moviesData,
      goViedo,
      sendSelectMoviceStore,
    };
  },
});
</script>
